<template>
  <section class="mui-content pd">
    <mh-header headName="匹配详情"> </mh-header>
    <div class="match-detail">
      <div class="matcher-info">
        <h4 class="mui-text-center part-title">匹配人资料</h4>
        <div class="matcher mt-box flex mh-pd-lr">
          <div class="matcher-l">
            <div class="pic-box">
              <img :src="matchInfo.pic" alt="匹配人头像">
            </div>
          </div>
          <div class="info">
            <p class="match-name">匹配人：用户<span v-text="matchInfo.name">****</span></p>
            <p>23岁 | 本科 | 上海长宁 | 老家：河南 | 宝马 | 90平绿地新 城房 | 苗条 | 9k</p>
          </div>
        </div>
        <div class="be-match mt-box flex mh-pd-lr">
          <div class="matcher-l">
            <div class="pic-box">
              <img :src="matchInfo.pic" alt="匹配人头像">
            </div>
          </div>
          <div class="info">
            <p class="match-name">被匹配人：用户<span v-text="matchInfo.name">****</span></p>
            <p>23岁 | 本科 | 上海长宁 | 老家：河南 | 宝马 | 90平绿地新 城房 | 苗条 | 9k</p>
          </div>
        </div>
        <div class="each-maker">
          <h4 class="mui-text-center part-title">双方红娘</h4>
          <div class="flex-bt maker-each mh-pd">
            <div class="mui-text-center">
              <div class="pic-box-sm">
                <img :src="matchInfo.makerPic" alt="头像">
              </div>
              <span class="txt-def">ta的红娘</span>
            </div>
            <div class="mui-text-center">
              <div class="pic-box-md">
                <img :src="matchInfo.makerPic" alt="头像">
              </div>
              <span class="txt-def">匹配人</span>
            </div>
            <div class="ic-exchange"><img src="../../../assets/images/ico/ic_e_exchange.png" alt=""></div>
            <div class="mui-text-center">
              <div class="pic-box-md">
                <img :src="beMatchInfo.makerPic" alt="头像">
              </div>
              <span class="txt-def">被匹配人</span>
            </div>
            <div class="mui-text-center">
              <div class="pic-box-sm">
                <img :src="beMatchInfo.makerPic" alt="头像">
              </div>
              <span class="txt-def">我的红娘</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--匹配度-->
    <div class="suitability">
      <h4 class="mui-text-center part-title">匹配度</h4>
      <div class="mh-pd">
        <div class="progress-bar flex-bt">
          <span class="name-label">体型匹配度</span>
          <p class="mui-progressbar mui-progressbar-success" :data-progress="suitability.bodyType"><span></span></p>
          <span class="percent" v-text="suitability.bodyType + '%'">80%</span>
        </div>
        <div class="progress-bar flex">
          <span class="name-label">面相匹配度</span>
          <p class="mui-progressbar mui-progressbar-success" :data-progress="suitability.face"><span></span></p>
          <span class="percent" v-text="suitability.face + '%'">80%</span>
        </div>
        <div class="progress-bar flex">
          <span class="name-label">生肖匹配度</span>
          <p class="mui-progressbar mui-progressbar-success" :data-progress="suitability.zodiac"><span></span></p>
          <span class="percent" v-text="suitability.zodiac + '%'">80%</span>
        </div>
        <div class="progress-bar flex">
          <span class="name-label">财富匹配度</span>
          <p class="mui-progressbar mui-progressbar-success" :data-progress="suitability.wealth"><span></span></p>
          <span class="percent" v-text="suitability.wealth + '%'">80%</span>
        </div>
      </div>
    </div>

  </section>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "mind-match",
    data () {
      return {
        matchInfo: {
          name: '****',
          pic: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2925197328,706576635&fm=26&gp=0.jpg',
          age: 23,
          edu: '本科',
          add: '上海长宁',
          hometown: '上海',
          carType: '宝马',
          house: '90平绿地新城房',
          bodyType: '苗条',
          income: '9k',
          level: 'B+',
          matchMaker: '红红娘',
          makerPic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=667941305,57453066&fm=26&gp=0.jpg',
        },
        beMatchInfo: {
          name: '用户****',
          pic: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2925197328,706576635&fm=26&gp=0.jpg',
          age: 23,
          edu: '本科',
          add: '上海长宁',
          hometown: '上海',
          carType: '宝马',
          house: '90平绿地新城房',
          bodyType: '苗条',
          income: '9k',
          level: 'B+',
          matchMaker: '红红娘',
          makerPic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=53899050,900497296&fm=26&gp=0.jpg',
        },
        suitability: {
          bodyType: '80',
          face: '99',
          zodiac: '60',
          wealth: '70'
        },
        info: {}
      }
    },
    created () {
      this.$nextTick(function() {
        mui('.mui-progressbar').each(function () {
          mui(this).progressbar({progress:this.getAttribute("data-progress")}).show();
        });
      });
      let id = this.$route.params.id;
      let self = this;
      MH_API.getTrystInfo({
        id: id
      }).then(res => {
        if (res.status === 200) {
          self.info = res.data;
        }
      })
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";
  .match-detail {background-color: #fff;border: 1px solid #fff;}
  .part-title {
    position: relative;
    margin-top: 1rem;
    padding: .5rem;
    @include sc(1.2rem, #333);
    &:after {
      content: '';
      position: absolute;
      width: 6.25rem;
      height: 1.2rem;
      margin: 0 auto;
      background: url("../../../assets/images/bg/bg_color_pink.png") no-repeat center bottom;
      background-size: 6.25rem .5rem;
      left: 0;
      right: 0;
    }
  }
  .pic-box {@include mh-avatar-box(4rem, 4rem)}
  .pic-box-md {@include mh-avatar-box(5rem, 5rem)}
  .pic-box-sm {@include mh-avatar-box(3rem, 3rem);margin: 1rem auto;}
  .info {
    padding: 1rem;
    border-bottom: 1px solid #eee;
  }
  .ic-exchange>img {width: 3rem;margin-bottom: 2.5rem;}
  .txt-def {display: inline-block;@include sc(1.2rem, #666);margin-top: 1rem;}
  .suitability {
    margin-top: 1rem;
    background-color: #fff;
  }
  .mui-progressbar {
    height: .7rem;
    border-radius: .4rem;
    background: #eee;
    span {
      border-radius: .4rem;
      background: linear-gradient(90deg, #6d43f5 0%, #c50ce7 60%);
    }
  }
  .progress-bar {
    margin-bottom: 2rem;
    .name-label {
      display: inline-block;
      width: 12rem;
      @include sc(1.4rem, #333);
    }
    .percent {
      margin-left: 1rem;
      font-size: 1.5rem;
      color: #c50ce7;
    }
  }
</style>
